<template>
  <div class="course_grid" v-if="list.length>0">
    <div :key="idx" class="item" v-for="(course,idx) in list" @click="onCourseClick(course)">
      <div class="imgBack">
        <img :src="course.pic"/>
      </div>
      <p class="ellipsis1">{{course.title}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'MeMyCourse',
    props: {
      courseList: {
        type: Array,
        required: true,
      }
    },
    computed: {
      list () {
        return this.courseList.filter((item, index) => index < 3)
      }
    },
    methods: {
      onCourseClick (course) {
        this.$_router.push(`/course/coursedetail/${course.id}`)
      }
    },
  }
</script>
<style scoped>

  .course_grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 16px;

  }

  .course_grid > .item {
    width: calc((100% - 16px) / 3);
    margin-right: 8px;
  }

  .course_grid :nth-child(3n) {
    margin-right: 0;
  }

  .imgBack {
    width: 100%;
    border-radius: 4px;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
  }
  .imgBack > img {
    width: 100%;
    object-fit: cover;
  }

  .course_grid > .item > p {
    font-size: 12px;
    color: #333333;
    margin-top: 8px;
  }
</style>
